﻿$(function () {
    layui.use(['layer', 'form', 'carousel', 'notice'], function () {
        var layer = parent.layer === undefined ? layui.layer : top.layer,
            form = layui.form,
            $ = layui.jquery,
            notice = layui.notice,
            carousel = layui.carousel;
        var onPageLoad = function () {
            var index = layer.load(2, { time: 10 * 1000 });
            window.parent.postMessage({
                mceAction: 'geteditorimgs'
            });
            window.addEventListener('message', function (event) {
                if (event.data.mceAction === 'editorimgs') {
                    var editorImageElms = event.data.data.mycarousel;
                    if (editorImageElms !== null && editorImageElms.length > 0) {
                        var $imgUl = $("ul#Images");
                        setTimeout(function () {
                            $.each(editorImageElms, function (i, imgEl) {
                                $imgUl.append('<li class="layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1"><div class="check"><input type="checkbox" name="editorImg" lay-filter="choose" lay-skin="primary" /><img layer-src="' + imgEl.src + '" src="' + imgEl.src + '" alt="' + imgEl.alt + '" data-id="' + imgEl.id + '" /></div></li>');
                            });
                            layer.close(index);
                            form.render();
                        }, 500);
                        //设置图片的高度
                        $(window).resize(function () {
                            $("#Images li img").height($("#Images li img").width());
                        });
                    }
                    else {
                        notice.error("编辑器里没有图片!");
                        layer.close(index);
                        setTimeout(function () {
                            window.parent.postMessage({
                                mceAction: 'close'
                            });
                        }, 2000);
                    }
                }
            });
        };
        onPageLoad();
        
        //全选
        $("body").on("click", ".selectall", function () {
            var othis = $(this),
                childlis = $("#Images li input[type='checkbox']"),
                checked = othis.hasClass("layui-btn-primary") ? "checked" : "";
            childlis.each(function (index, item) {
                item.checked = checked;
            });
            if (checked === "checked") othis.removeClass('layui-btn-primary');
            else othis.addClass('layui-btn-primary');
            form.render('checkbox');
        });
        ////设置轮播图
        var mycarousel = null,
            imgList = new Array();
        $("body").on("click", ".selecttomycarousel", function () {
            var $selectImgEls = $('#Images li input[type="checkbox"]:checked'),
                $carouselDemo = $("div#mycarousel"),
                carouselHtml = '<div carousel-item>';
            if ($selectImgEls.length <= 0)
                return false;
            $carouselDemo.empty();
            while (imgList.length > 0) {
                imgList.pop();
            }
                
            $selectImgEls.each(function () {
                var $imgEl = $(this).siblings("img").eq(0),
                    imgdata = new Object();
                imgdata.id = $imgEl.data('id');
                imgdata.src = $imgEl.attr('src');
                imgdata.alt = $imgEl.attr('alt');
                carouselHtml += '<div><img src="' + imgdata.src + '" alt="' + imgdata.alt + '" data-id="' + imgdata.id + '" /></div>';
                imgList.push(imgdata);
            });
            carouselHtml += '</div>';
            $carouselDemo.append(carouselHtml);
            if (mycarousel !== null)
                mycarousel.reload();
            else
                mycarousel = carousel.render({
                    elem: '#mycarousel'
                  , width: '520px'
                  , height: '300px'
                  , interval: 2000
                });
        });

        $("body").on("click", ".setdone", function () {
            if (imgList.length <= 0)
                notice.error("未选中图片!");
            else {
                layer.confirm('轮播图片设置成功，是否删除编辑器中图片？', { icon: 3, title: '提示' },
                    function (index) { //Yes
                        layer.close(index);
                        window.parent.postMessage({
                            mceAction: 'deleteeditorimgs',
                            data: { mycarousel: imgList }
                        });
                        window.parent.postMessage({
                            mceAction: 'close'
                        });
                    },
                    function (index) { //No
                        layer.close(index);
                        window.parent.postMessage({
                            mceAction: 'nodeleteeditorimgs',
                            data: { mycarousel: imgList }
                        });
                        window.parent.postMessage({
                            mceAction: 'close'
                        });
                    }
                );
            }
        });
    });
});